import React from 'react';
import { Button, Typography, Space, Card } from 'antd';
import { MessageOutlined, RobotOutlined, ThunderboltOutlined, StarOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import '../styles/welcome.css';

const { Title, Paragraph } = Typography;

const Welcome: React.FC = () => {
  const navigate = useNavigate();

  const features = [
    {
      icon: <RobotOutlined />,
      title: '智能对话',
      description: '基于先进AI技术，提供自然流畅的对话体验'
    },
    {
      icon: <ThunderboltOutlined />,
      title: '快速响应',
      description: '毫秒级响应速度，让对话更加流畅自然'
    },
    {
      icon: <StarOutlined />,
      title: '个性化',
      description: '根据您的需求定制专属的对话体验'
    }
  ];

  const handleStartChat = () => {
    navigate('/chat');
  };

  return (
    <div className="welcome-container">
      {/* 视频背景 */}
      <div className="video-background">
        <video className="background-video" autoPlay loop muted playsInline>
          <source src="/vedio/夏日的风.mp4" type="video/mp4" />
        </video>
        <div className="overlay"></div>
      </div>

      {/* 主要内容 */}
      <div className="welcome-content">
        <div className="welcome-header">
          <div className="logo-section">
            <div className="logo-icon">
              <MessageOutlined />
            </div>
            <Title level={1} className="welcome-title">
              DannyAI
            </Title>
            <Paragraph className="welcome-subtitle">
              您的智能对话助手
            </Paragraph>
          </div>
        </div>

        <div className="welcome-features">
          <Space direction="vertical" size="large" className="features-container">
            {features.map((feature, index) => (
              <Card key={index} className="feature-card">
                <div className="feature-content">
                  <div className="feature-icon">{feature.icon}</div>
                  <div className="feature-text">
                    <Title level={4} className="feature-title">
                      {feature.title}
                    </Title>
                    <Paragraph className="feature-description">
                      {feature.description}
                    </Paragraph>
                  </div>
                </div>
              </Card>
            ))}
          </Space>
        </div>

        <div className="welcome-actions">
          <Button
            type="primary"
            size="large"
            icon={<MessageOutlined />}
            onClick={handleStartChat}
            className="start-chat-btn"
          >
            开始对话
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Welcome;
